import React, { useEffect, useRef, useState } from 'react';
import {
  View,
  TouchableOpacity,
  Image,
  RefreshControl,
  ScrollView,
  Linking,
  StyleSheet,
  Text,
  TextInput
} from 'react-native';
import { showMessage, hideMessage } from 'react-native-flash-message';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { changeNAME, changeHEAD } from '../store/device/actions';
import * as Storage from '../utils/Storage';
import { launchImageLibrary } from 'react-native-image-picker';

function AboutUsPage({ navigation, nameStr, changeNAME, headStr }) {

  React.useLayoutEffect(() => {
    navigation.setOptions({
      title: 'Personal Settings',
      headerLeft: () => (
        <TouchableOpacity
          onPress={() => {
            navigation.goBack()
          }}
          style={{ paddingHorizontal: 15 }}>
          <View>
            <Image
              source={require('../images/icon_back.png')}
              style={{ height: 24, width: 24 }}
            />
          </View>
        </TouchableOpacity>
      ),
    });
  }, [navigation]);

  const [value, onChangeText] = React.useState(nameStr);
  const [aa, setAa] = React.useState(headStr);

  async function onSaveNickName() {
    await Storage.save(Storage.NICKNAME, value);
    changeNAME(value);
    showMessage({
      message: 'Save name succeeded',
      type: 'success',
      icon: 'success',
      duration: 1500,
    });
  }

  function changeAvatar() {
    // 第三方库 访问相册 
    launchImageLibrary({
      mediaType: 'photo',
      maxWidth: 400,// 设置选择照片的大小，设置小的话会相应的进行压缩
      maxHeight: 400,
      quality: 0.8,
      includeBase64: true
    }, async res => {
      if (res.didCancel) {
        return false;
      }
      // 对获取的图片进行处理
      // console.log('res.uri' + res['assets'][0]['base64'])
      await Storage.save(Storage.HEAD, res['assets'][0]['base64']);
      changeHEAD(res['assets'][0]['base64'])
      setAa(res['assets'][0]['base64']);
    })
  }

  return (
    <View style={{ flex: 1, alignItems: 'center', backgroundColor: '#DDDDDD' }}>
      {/* <ScrollView style={{ flex: 1, marginTop: 80, width: '100%' }} showsVerticalScrollIndicator={false}>
        {
          setArrData.map((item, index) => {
            return (renderSetItem({ item, index }))
          })
        }
      </ScrollView> */}
      <View style={{ marginTop: 80, width: '100%', paddingHorizontal: 15 }}>
        <View style={{
          height: 70,
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
          paddingHorizontal: 20,
          borderBottomColor: '#BDBDBD',
          borderBottomWidth: StyleSheet.hairlineWidth,
        }}>
          <Text style={styles.text}>Avatar</Text>
          <TouchableOpacity onPress={() => changeAvatar()}>
            <Image
              source={aa ? {
                uri: 'data:image/png;base64,' + aa,
              } : require('../images/head_default.png')}
              style={{ height: 60, width: 60, borderRadius: 30 }}
            />
            <Image
              user
              source={require('../images/icon_cam.png')}
              style={{ height: 24, width: 24, position: 'absolute', top: 18, right: 18 }}
            />
          </TouchableOpacity>
        </View>
        <View style={{
          height: 70,
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
          paddingHorizontal: 20,
          borderBottomColor: '#BDBDBD',
          borderBottomWidth: StyleSheet.hairlineWidth,
        }}>
          <Text style={styles.text}>Nickname</Text>
          <View style={{ flex: 1, flexDirection: 'row' }}>
            <TextInput style={{ flex: 1, textAlign: 'right' }} onChangeText={text => onChangeText(text)}
              value={value} enablesReturnKeyAutomatically={true} onSubmitEditing={() => onSaveNickName()} />
            <Image
              source={require('../images/right_edit.png')}
              style={{ height: 24, width: 24 }}
            />
          </View>
        </View>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  text: {
    fontSize: 16,
    color: '#060606',
    fontWeight: "400",
    fontFamily: 'Moldiv',
    // includeFontPadding: false,
    // textAlignVertical: 'center'
  }
})

const mapStateToProps = ({
  device: {
    nameStr,
    headStr
  },
}) => ({
  nameStr,
  headStr
});

const enhance = compose(
  connect(mapStateToProps, {
    changeNAME,
    changeHEAD
  }),
);
export default enhance(AboutUsPage);